<template>
  <panel title="账号列表">
    <!-- 列表 -->
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column label="账号">
        <template slot-scope="scope">{{ scope.row.account }}</template>
      </el-table-column>
      <el-table-column prop="userGroup" label="用户组"> </el-table-column>
      <el-table-column label="创建时间" show-overflow-tooltip>
        <template slot-scope="scope"
          ><span>{{ scope.row.ctime | formatCtime }}</span></template
        >
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button @click="listEdit(scope)">编辑</el-button>
          <el-popconfirm @confirm="handleConfirm(scope)" title="确认删除吗">
            <el-button slot="reference" type="danger">删除</el-button>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage4"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageinfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <div style="margin-top: 20px">
      <el-button @click="delAll">批量删除</el-button>
      <el-button @click="toggleSelection()">取消选择</el-button>
    </div>

    <el-dialog title="修改账号" :visible.sync="dialogFormVisible">
      <accountForm @ruleForm1="forms2" @ruleForm="forms" :defaultForm="userList" type="list"></accountForm>
    </el-dialog>
  </panel>
</template>

<script>
// import axios from "@/utils/axios";
import dayjs from "dayjs";
import accountForm from "./components/accountForm.vue"; 
import {
  delBatchdel,
  userDelReq,
  userEdit,
  userListReq,
} from "@/api/account.api";
import axios from "@/utils/axios";
export default {
  components:{
    accountForm
  },
  data() {
    return {
      tableData: [],
      pageinfo: {
        currentPage: 1,
        pageSize: 5,
      },
      total: 50,
      currentPage4: 1,
      ids: [],
      dialogFormVisible: false,
      form: {
        account: "",
        userGroup: "",
        id: "",
      },
      userList:{}
    };
  },
  created() {
    this.listGet();
  },

  methods: {
    handleSizeChange(val) {
      // this.pageinfo.currentPage = val
      console.log(val);
      //改变每页数量
      this.pageinfo.pageSize = val;
      //重新调用listGet
      this.listGet();
    },

    handleCurrentChange(val) {
      // 改变页码
      this.pageinfo.currentPage = val;
      // 重新调用listGet
      this.listGet();
    },

    async listGet() {
      const res = await userListReq(this.pageinfo);
      console.log(res);
      let list = res.data.data;

      // for (let i = 0; i < list.length; i++) {
      //   list[i].ctime = dayjs(list[i].ctime).format("YYYY/MM/DD");
      // }
      // console.log(list);
      this.tableData = list;
      this.total = res.data.total;
    },

    handleConfirm({ row }) {
      console.log(row.id);
      userDelReq(row.id).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.listGet();
        } else {
          this.$message.error(res.data.msg);
        }
      });
    },

    handleSelectionChange(val) {
      // this.multipleSelection = val;
      console.log(val);
      this.ids = val;
    },

    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    delAll() {
      let ids = [];
      for (let i = 0; i < this.ids.length; i++) {
        ids.push(this.ids[i].id);
      }
      console.log(ids);
      ids = JSON.stringify(ids);
      delBatchdel(ids).then((res) => {
        console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        }
        this.listGet();
      });
    },

    listEdit({ row }) {
      console.log(row);
      this.dialogFormVisible = true;
      this.form.account = row.account;
      this.form.userGroup = row.userGroup;
      this.form.id = row.id;
      this.userList = row
      console.log(this.userList);
    },

    submit() {
      console.log(this.form);
      userEdit(this.form).then((res) => {
        // console.log(res);
        if (res.data.code == 0) {
          this.$message({
            message: res.data.msg,
            type: "success",
          });
        }
        this.dialogFormVisible = false;
        this.listGet();
      });
    },

    forms(res){
      console.log(res);
      this.dialogFormVisible = res.dialogFormVisible
      userEdit(res).then(res => {
        console.log(res);
        if(res.data.code == 0){
          this.$message({
            message: res.data.msg,
            type: "success",
          });
          this.listGet()
        }
      })
    },

    forms2(res){
      this.dialogFormVisible = res.dialogFormVisible
    }

  },

  filters: {
    formatCtime(ctime) {
      return dayjs(ctime).format("YYYY-MM-DD");
    },
  },
};
</script>

<style lang="less" scoped>
</style>